<template>
  <div class="btn" :class="className" @click="jumpClick">
    {{ title }}
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
interface IProps {
  className?: string
  title: string
  url?: string
}

const props = defineProps<IProps>()
const router = useRouter()
const jumpClick = () => {
  if (!props.url) return
  router.push(props.url)
}
</script>

<style lang="less" scoped>
.btn {
  width: 120px;
  height: 40px;
  font-size: 1.5rem;
  background-color: @btnBgColor1;
  text-align: center;
  line-height: 40px;
  border-radius: 10px;
  box-shadow: 4px 4px 0px @btnboxBgColor1;
  position: relative;
  color: #fff;
  overflow: hidden;
  border: 2px solid #fff;
  margin: 0 10px;
}

.slip {
  &:after {
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    display: block;
    width: 200px;
    height: 70px;
    background-image: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0),
      rgba(255, 255, 255, 0.3),
      rgba(0, 0, 0, 0)
    );
    transform: rotate(-45deg) translate(0, -130px);
  }
  &:hover {
    transition: box-shadow 0.5s ease-in-out;
    box-shadow: 10px 6px 6px @btnboxBgColor1;
    &:after {
      transition: transform 1s ease-in-out;
      transform: rotate(-45deg) translate(0, 60px);
    }
  }
}
</style>
